<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>调色板小程序</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .color {
            width: 350px;
            height: 400px;
        }
        .color2{
            width: 350px;
            height: 400px;
            background-color: bisque;
            padding:  50px 30px;
            box-sizing: border-box;
        }
        #color_show{
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 2;
        }
        .slider{
            float: left;
            margin-right: 88px;
        }
        .slider:last-of-type{
            margin-right: 0px;
        }
        .slider>p{
            width: 100%;
            text-align: center;
        }
        .color_16{
            width: 350px;
            height: 30px;
            position: absolute;
            bottom: 20px;
            left: 350px;
            color: #333;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="root">
        <Palette></Palette>
    </div>


    <script>
        // 定义个调色板组件，顺便练一练非单文件组件
        let Palette = Vue.extend({
            template: `
            <el-row>
                <el-col :span="12">
                    <div class="color">
                        <div id="color_show" :style=" {background:backcolor} "></div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="color2">
                        <div class="slider">
                            <el-slider v-model=" color.red " vertical height="200px" :min="0" :max="255"></el-slider>
                            <p>红</p>
                        </div>
                        <div class="slider">
                            <el-slider v-model=" color.green " vertical height="200px" :min="0" :max="255"></el-slider>
                            <p>绿</p>
                        </div>
                        <div class="slider">
                            <el-slider v-model=" color.blue " vertical height="200px" :min="0" :max="255"></el-slider>
                            <p>蓝</p>
                        </div>
                        <p class="color_16">{{color_16}}</p>
                    </div>
                </el-col>
            </el-row>
            `,
            data() {
                return {
                    color:{
                        red:0,
                        green:0,
                        blue:0
                    }
                }
            },
            computed:{
                backcolor(){
                    return ` rgb(${this.color.red},${this.color.green},${this.color.blue}) `
                },
                color_16(){
                    let r = []
                    let g = []
                    let b = []
                    function get_16(color,arr){
                        arr.unshift(color % 16)
                        arr.unshift( Math.floor(color / 16))
                    }
                    get_16(this.color.red,r)
                    get_16(this.color.green,g)
                    get_16(this.color.blue,b)

                    function dispose(item){
                        switch(item){
                            case 10:
                                return 'A'
                            case 11:
                                return 'B'
                            case 12:
                                return 'C'
                            case 13:
                                return 'D'
                            case 14:
                                return 'E'
                            case 15:
                                return 'F'
                            default:
                                return item
                        }
                    }
                    let color = []
                    color.push(r.map(dispose))
                    color.push(g.map(dispose))
                    color.push(b.map(dispose))
                    return `#${color[0][0]}${color[0][1]}${color[1][0]}${color[1][1]}${color[2][0]}${color[2][1]}`
                }
            }
        })


        // 根组件
        const vm = new Vue({
            components: {
                Palette
            }
        }).$mount('#root')
    </script>
</body>

</html>